<script lang="ts">
import { defineComponent, reactive, onMounted, computed, ref } from "vue";
import { useStore } from "vuex";
import PageSearch from "@/components/page-search";
import PageContent from "@/components/page-content";
import PageModel from "@/components/page-modal-edit";
import PageModal from "@/components/page-modal";
import { contentTableConfig } from "./config/content.config";
import { modalConfig } from "./config/modal.config";
import { usePageSearch } from "@/hooks/use-page-search";
import type { FormInstance, FormRules } from "element-plus";
import type { UploadProps, UploadUserFile } from "element-plus";
import OSS from "ali-oss";
import { usePageModel } from "@/hooks/use-page-modal";
export default defineComponent({
  name: "user",
  components: {
    PageSearch,
    PageContent,
    PageModal,
    PageModel
  },
  setup(porps) {
    const store = useStore();
    const pageModalRef = ref<InstanceType<typeof PageModal>>();
    const pageModelRef = ref<InstanceType<typeof PageModel>>();
    // const pageModalRefEdit = ref<InstanceType<typeof PageModel>>();
    // const defaultInfo = ref({});
    // 新建员工是否显示
    // store.dispatch("system/getemployeeCountAction", {
    //   queryinfo: {
    //     start: 0,
    //     end: 5
    //   }
    // });
    // // const pageContentRef = ref < InstanceType<typeof PageContent>();
    // const pageContentRef = ref<InstanceType<typeof PageContent>>();
    // const handleResetClick = () => {
    //   pageContentRef.value?.getPageData();
    // };
    // const handleQueryClick = (queryinfo: any) => {
    //   pageContentRef.value?.getPageData(queryinfo);
    // };
    const [handleResetClick, handleQueryClick, pageContentRef] =
      usePageSearch();
    // const [defaultInfo, pageModelRef, handleEditData] = usePageModel();
    const handleNewData = () => {
      if (pageModalRef.value) {
        pageModalRef.value.centerDialogVisible = true;
      }
    };
    const defaultInfo = ref({});
    const handleEditData = (item: any) => {
      console.log(pageModelRef);
      console.log(item);
      defaultInfo.value = { ...item };
      if (pageModelRef.value) {
        console.log(1234);
        pageModelRef.value.EditdialogVisible = true;
      }
    };
    return {
      contentTableConfig,
      handleResetClick,
      handleQueryClick,
      pageContentRef,
      handleNewData,
      handleEditData,
      pageModalRef,
      defaultInfo,
      pageModelRef,
      modalConfig
    };
  }
});
</script>

<template>
  <div class="user">
    <PageSearch />
    <div class="content">
      <PageContent
        ref="pageContentRef"
        :contentTableConfig="contentTableConfig"
        @resetBtnClick="handleResetClick"
        @queryBtnClick="handleQueryClick"
        @newBtnClick="handleNewData"
        @editBtnClick="handleEditData"
      >
        <!-- <template #imageSlot="scope">

          <span>0000</span>
        </template> -->
      </PageContent>
      <!-- 新建员工页面 -->
      <PageModal ref="pageModalRef"></PageModal>
      <PageModel
        ref="pageModelRef"
        :defaultInfo="defaultInfo"
        :modalConfig="modalConfig"
      ></PageModel>
    </div>
  </div>
</template>

<style scoped lang="less">
.user {
  .content {
    background-color: #fff;
    border-radius: 10px;
  }
}
</style>
